/**
 * 1、判断dom对象class属性值是否包含targetName
 * @param domObject
 * @param targetName
 * @return (boolean) true表示包含targetName，false表示不包含targetName
 */
function hasClass(domObject, targetName) {
  //参数非法处理
  if (!domObject || !domObject.className || !targetName) return false
  //可以对字符串使用空格分割成数组,使用空格对字符串进行分割
  let arr = domObject.className.trim().split(' ').filter(item => item !== '')
  //判断数组中是否包含某个元素,如果下标是-1,表示没有，>=0说明元素存在
  return arr.findIndex(item => item === targetName.trim()) >= 0
}

/**
 * 2、给dom元素添加类样式
 * @param domObject
 * @param targetName
 */
function addClass(domObject, targetName) {
  //非法参数
  if (!domObject || !targetName) return
  //判断是否存在targetName
  if (hasClass(domObject, targetName)) return
  //domObject没有class属性
  if (domObject.className === '') {
    domObject.className += targetName
  } else {
    domObject.className += ' ' + targetName
  }
}

/**
 * 3、删除指定的targetName
 * @param domObject
 * @param targetName
 */
function removeClass(domObject, targetName) {
  //非法参数
  if (!domObject || !domObject.className || !targetName) return
  //没有此targetName，不删除
  if (!hasClass(domObject, targetName)) return
  //获得class的属性值
  let str = String(domObject.className)
  //使用空字符串替换targetName
  str = str.replace(targetName, '')
  //重新赋值给domObject
  domObject.className = str.trim()
  if (domObject.className === '') {
    domObject.removeAttribute('class')
  }
}

/**
 * 4、替换图片的属性
 * @param imgObj
 */
function replaceImageSrc(imgObj) {
  //非法参数
  if (!imgObj || !imgObj.getAttribute('src') || !imgObj.getAttribute('imgSrc')) return
  //创建图片对象
  let img = new Image()
  //获得imgObj的imgSrc
  let imgSrc = imgObj.getAttribute('imgSrc')
  //监听img的加载过程，是异步执行，在有src资源下才会执行
  img.onload = function() {
    //图片显示结束
    if (img.complete) {
      //替换路径
      imgObj.src = imgSrc
      //删除类样式
      removeClass(imgObj, 'lazy')
      //删除属性
      imgObj.removeAttribute('imgSrc')
    }
  }
  img.src = imgSrc
}

/**
 * 5、给指定的dom元素添加指定的事件，执行指定函数
 * @param domElement dom元素
 * @param eventType 事件类型
 * @param callBack 回调函数
 */
function addEvent(domElement, eventType, callBack) {
  if (domElement.addEventListener) {
    //IE9、其它浏览器兼容事件绑定
    domElement.addEventListener(eventType, callBack)
  } else if (domElement.attachEvent) {
    //IE6-IE8兼容的事件绑定
    domElement.attachEvent('on' + eventType, callBack)
  } else {
    //IE5兼容的事件绑定
    domElement.attachEvent['on' + eventType] = callBack
  }
}

/**
 * 6、给指定的dom元素移除指定回调函数的事件
 * @param domElement
 * @param eventType
 * @param callBack 事件函数只能使用外部函数，不能使用匿名函数
 */
function removeEvent(domElement, eventType, callBack) {
  if (domElement.removeEventListener) {
    //IE9、其它浏览器兼容事件移除
    domElement.removeEventListener(eventType, callBack)
  } else if (domElement.detachEvent) {
    //IE6-IE8兼容的事件移除
    domElement.detachEvent('on' + eventType, callBack)
  } else {
    //IE5兼容的事件移除
    domElement['on' + eventType] = null
  }
}

/**
 * 7、图片懒加载
 * @param lazyArr img元素数组
 */
function lazyLoad() {
  let lazyArr = document.getElementsByClassName('lazy')
  console.log(lazyArr)
  if (!lazyArr || lazyArr.length === 0) return
  for (let i = 0, n = lazyArr.length; i < n; i++) {
    console.log('%c offsetTop[' + i + ']=' + lazyArr[i].offsetTop, 'color:blue;')
    console.log('%c scrollY=' + (window.scrollY + window.innerHeight), 'color:red;')
    if (window.scrollY + window.innerHeight > lazyArr[i].offsetTop) {
      setTimeout(function() {
        replaceImageSrc(lazyArr[i])
      }, 2000)
    }
  }
}



